﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SetListManager.Models.SetList>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Create New Set List
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <%--jquery --%>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>   

    <%--jquery ui: gives us drag/drop sort functionaltiy--%>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>   

    <%--jqueryui stylesheet --%>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <link href="../../Content/timePicker.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery.timePicker.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function () {
            $("#GigDate").datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true
            });

            $("#Name").focus();

            $("#GigTime").timePicker({
                startTime: "00:00", // Specify valid start and end time range
                endTime: "23:59",
                show24Hours: false, // use PM/AM
                separator: ':',
                step: 15
            });

            $("#createform").validate({
                rules: {
                    Name: {
                        required: true
                    },
                    GigDate: {
                        required: true
                    },
                    GigTime: {
                        required: true
                    }
                },
                messages: {
                    Name: "Please enter the set list name.",
                    GigDate: "Please enter a valid date.",
                    GigTime: "Please enter a valid time."
                }
            });

        });

	</script>

    <style type="text/css">
    #createform label.error
    { 
        padding-left: 5px;
        color: #ff0000;
    }
    .editor-field 
    {
        padding: 3px;
    }
    .editor-label 
    {
        padding: 3px;
    }

    </style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<% 
    using (Html.BeginForm("Create", "SetList", FormMethod.Post, new { @id = "createform"})) { %>
    <div id="editbuttons_rt">
    <input type="submit" class="link-button" value="Create" />
    <%: Html.ActionLink("Cancel", "Index", null, new { @class = "link-button" })%>
    </div>
    <h1>Create New Set List</h1>
    <p>Enter the details for your new set list:</p>
            <div class="editor-label">
                Set List Name
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Name, new { Style="width: 340px;"}) %>
                <%: Html.ValidationMessageFor(model => model.Name) %>
            </div>
            <div class="editor-label">
                Gig Date
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.GigDate)%>
            </div>
            <div class="editor-label">
                Start Time
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.GigTime) %>
            </div>
            <br />
<% } %>

</asp:Content>

